<!-- 进度图 -->
<!--  图标形式-折线图 -->
<template>
    <div class="charts" ref="progressChart"> </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    name: 'ProgressCharts',
    mounted() {
        this.initCharts();
    },
    methods: {
        initCharts() {
            let progressCharts = echarts.init(this.$refs.progressChart);
            progressCharts.setOption({
                xAxis: {
                    show: false,
                    min: 0,
                    max: 100,
                },
                yAxis: {
                    show: false,  //隐藏                
                    type: "category", //均分排序    
                },
                series: [
                    {
                        //图标形式-柱状图
                        type: "bar",
                        data: [68],
                        color: "yellowgreen",
                        //柱状图的宽度
                        barWidth: 10,
                        //背景颜色设置
                        showBackground: true,
                        //设置背景颜色
                        backgroundStyle: {
                            color: "#eee",
                        },
                        //文本标签
                        label: {
                            show: true,
                            //改变文本内容
                            formatter: '|',
                            //文本标签位置调试
                            position: 'right'
                        }
                    },
                ],
                //布局调试
                grid: {
                    left: 0,
                    top: 0,
                    right: 0,
                    bottom: 0,
                },
            });
        },
    },
}
</script>

<style scoped>
.charts {
    width: 100%;
    height: 100%;
}
</style>